<template>
  <div class="driver-management">
    <el-card style="margin-bottom: 20px;" shadow="never">
      <el-form inline>
        <el-form-item label="司机姓名：">
          <el-input v-model="params.name" placeholder="请输入司机姓名" />
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="addDriver">添加司机信息</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >

        <el-table-column prop="id" label="ID" align="center" />

        <el-table-column prop="user.username" label="姓名" align="center" />

        <el-table-column prop="driver_license_type" label="驾照类型" align="center" />

        <el-table-column prop="created_at" label="创建时间" align="center">
          <template v-slot="{ row }">
            {{ timeFormat(row.created_at) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button size="mini" type="primary" @click="editDriver(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleRemoveDriver(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="pagination">
        <Pagination
          v-if="total"
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :limit="params.paginate"
          :page="params.page"
          @pagination="pagination"
        />
      </div>
    </el-card>

    <AddDriverDialog
      v-model="addDriverDialogShow"
      @onConfirm="addDriverConfirm"
    />

    <EditDriverDialog
      v-model="editDriverDialogShow"
      :driver-info="currentDriverInfo"
      @onConfirm="editDriverConfirm"
    />
  </div>
</template>

<script>
import { getDriverList, deleteDriver, editDriver, addDriver } from '@/api/vehicleService'
import AddDriverDialog from '@/views/vehicleService/components/driverManagement/AddDriverDialog.vue'
import EditDriverDialog from '@/views/vehicleService/components/driverManagement/EditDriverDialog.vue'
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination/index.vue'
export default {
  name: '',
  components: {
    Pagination,
    AddDriverDialog,
    EditDriverDialog
  },
  data() {
    return {
      loading: false,
      list: [],
      addDriverDialogShow: false,
      editDriverDialogShow: false,
      currentDriverInfo: null,
      total: 0,
      params: {
        paginate: 10,
        page: 1,
        name: ''
      }
    }
  },
  created() {
    this.getDriverList()
  },
  methods: {
    pagination(e) {
      this.params.page = e.page
      this.params.paginate = e.limit
      this.refresh()
    },
    async getDriverList() {
      this.loading = true
      try {
        const res = await getDriverList(this.params)
        console.log('this.list --------->', res)
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      } finally {
        await this.sleep(300)
        this.loading = false
      }
    },

    handleRemoveDriver(row) {
      this.$confirm(
        '是否删除该项？',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      ).then(() => {
        this.removeDriverFetch(row.id)
      })
    },

    async removeDriverFetch(id) {
      try {
        const res = await deleteDriver(id)
        this.$message.success('删除成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '删除失败')
      }
    },

    addDriver() {
      this.addDriverDialogShow = true
    },

    async addDriverConfirm(e) {
      try {
        const res = await this.addDriverFetch(e)
        this.$message.success('添加成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.message || '添加失败')
      }
    },

    async addDriverFetch(data) {
      const res = await addDriver(data)
        .catch(err => {
          throw new Error(err?.response?.data?.message || '添加失败')
        })

      if (res.code !== 200) {
        throw new Error('添加失败')
      }

      return res
    },

    editDriver(row) {
      console.log('row --------->', row)
      this.currentDriverInfo = {
        id: row.id,
        user_id: row.user_id,
        username: row?.user?.username,
        driver_license_type: row.driver_license_type
      }

      this.editDriverDialogShow = true
    },

    editDriverConfirm(e) {
      this.editDriverFetch(e)
    },

    async editDriverFetch(data) {
      try {
        const res = await editDriver(data)
        this.$message.success('修改成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '修改失败')
      }
    },

    handleSearch() {
      this.refresh()
    },

    resetSearch() {
      this.params = this.$options.data().params
      this.refresh()
    },

    timeFormat(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },

    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },

    refresh() {
      this.getDriverList()
    }
  }
}
</script>

<style scoped lang='scss'>
.driver-management {
  padding: 20px;

  ::v-deep(.el-form-item) {
    margin-bottom: 0;
  }

  .pagination {
    display: flex;
    justify-content: end;
  }
}

::v-deep(.el-card) {
  border: none;
}
</style>
